<template>
  <div>
    <div style="margin-bottom: 15px; height: 32px">
      <span style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <el-button
        class="filter-item fr"
        size="small"
        style="margin-left: 10px"
        type="success"
        icon="el-icon-edit"
        @click="$router.push('/questions/new')"
        >新增试题
      </el-button>
    </div>
    <el-form label-width="75px" size="small" :model="form">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
              placeholder="请选择"
              v-model="form.subjectID"
              @change="getTwoLevel"
              ref="subject"
              value-key="id"
            >
              <el-option
                :key="item.id"
                :label="item.label"
                :value="item.value"
                v-for="item in subjectList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select placeholder="请选择" v-model="form.catalogID">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in TwoLevelList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select placeholder="请选择" v-model="form.tags">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in tagList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input
              placeholder="根据题干搜索"
              v-model="form.keyword"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select placeholder="请选择" v-model="form.questionType">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select placeholder="请选择" v-model="form.difficulty">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select placeholder="请选择" v-model="form.direction">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select placeholder="请选择" v-model="form.creatorID">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目标注" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="city" :inline="true">
                  <el-select
                    placeholder="请选择"
                    style="width: 98%; margin-right: 20px"
                    v-model="form.province"
                    @change="getCity"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="item in provincesList"
                      :key="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="province" :inline="true">
                  <el-select
                    placeholder="请选择"
                    style="width: 98%"
                    v-model="form.city"
                  >
                    <el-option
                      :label="item"
                      :key="item"
                      :value="item"
                      v-for="item in cityList"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="4" :offset="15">
              <el-button size="small" @click="resetForm">清除</el-button>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-button size="small" type="primary" @click="filterQuest"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple as getSubjectAPI } from '@/api/hmmm/subjects'
import { simple as getTowSubjectAPI } from '@/api/hmmm/directorys'
import { simple as getTagsAPI } from '@/api/hmmm/tags'
import { list as getFilterListAPI } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  name: 'questions-filter',
  data () {
    return {
      form: {
        // 当前页码
        page: 1,
        // 当前页容量
        pagesize: 5,
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      subjectList: [], // 学科
      TwoLevelList: [], // 二级目录
      tagList: [], // 标签
      provincesList: [], // 省
      cityList: [] // 市
    }
  },
  // 生命周期钩子调用
  created () {
    this.getSubject()
    this.provincesList = provinces() // 获取全部的市
  },
  methods: {
    // 获取学科
    async getSubject () {
      const { data } = await getSubjectAPI()
      // console.log(data)
      this.subjectList = data
    },
    // 获取二级目录
    async getTwoLevel () {
      const res = await getTowSubjectAPI({ subjectID: this.form.subjectID })
      // console.log(res)
      this.TwoLevelList = res.data
      this.getTags()
    },
    async getTags () {
      const res = await getTagsAPI({ subjectID: this.form.subjectID })
      // console.log(res)
      this.tagList = res.data
    },

    // 清空表单
    resetForm () {
      this.form = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
      this.$parent.$parent.getquestionsList()
    },
    // 获取市下面的县
    getCity (val) {
      // console.log(val)
      this.cityList = citys(val)
    },
    // 搜索按钮
    async filterQuest () {
      const { data } = await getFilterListAPI(this.form)
      if (data.counts === 0) {
        this.$message.error('未找到相关数据')
      }
      // console.log(data.items)
      data.items.forEach(item => {
        // console.log(item.question)
        item.question = item.question.replace(/<[^>]+>/g, '')
      })
      this.$parent.$parent.list = data.items
      this.$parent.$parent.total = data.counts
    }
  }
}
</script>

<style scoped>
.el-input,
.el-select {
  width: 100%;
}
</style>
